Skip to content

Instantly share code, notes, and snippets.

@EncodeTheCode

EncodeTheCode/scrollbar_win95_design_diff2.htm

Created May 20, 2024 00:38
Show Gist options
  • Save EncodeTheCode/f0bb6782467ee53c16cc7ad87c86cb3a to your computer and use it in GitHub Desktop.
Save EncodeTheCode/f0bb6782467ee53c16cc7ad87c86cb3a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scrollbar_win95_design_diff2.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Bar with Images</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.vertical-bar {
display: flex;
flex-direction: column;
align-items: center;
border: 0px solid #000;
height: 500px; /* Adjust the height as needed */
position: relative;
}
.top-image {
padding: 2px; /* Padding inside the button */
width: 16px;
height: 16px;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #000; /* Typical Windows 95 button shadow */
object-fit: cover;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='optimizeSpeed' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16'%3E%3Cpolygon points='11,9 11,10 4,10 4,9 5,9 5,8 6,8 6,7 7,7 7,6 8,6 8,7 9,7 9,8 10,8 10,9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
text-align: center; /* Center the text */
display: flex; /* Use flexbox for centering */
align-items: center; /* Vertically center items */
justify-content: center; /* Horizontally center items */
background-color: #d9d9d9; /* Button background color */
cursor: pointer; /* Pointer cursor on hover */
border: 2px solid #bfbfbf; /* Light gray border for the button look */
}
.middle-section {
flex: 1;
width: 100%;
/* background: url('middle-image.jpg') repeat-y; */
background: silver;
width: 22px;
min-height: 8px;
height: 50%;
background-size: 100% auto;
box-shadow: inset -1px -1px black, inset 1px 1px silver, inset -2px -2px gray, inset 2px 2px white;
}
.bottom-image {
padding: 2px; /* Padding inside the button */
width: 16px;
height: 16px;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #000; /* Typical Windows 95 button shadow */
object-fit: cover;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='optimizeSpeed' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16'%3E%3Cpolygon points='11,9 11,10 4,10 4,9 5,9 5,8 6,8 6,7 7,7 7,6 8,6 8,7 9,7 9,8 10,8 10,9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
text-align: center; /* Center the text */
display: flex; /* Use flexbox for centering */
align-items: center; /* Vertically center items */
justify-content: center; /* Horizontally center items */
background-color: #d9d9d9; /* Button background color */
cursor: pointer; /* Pointer cursor on hover */
border: 2px solid #bfbfbf; /* Light gray border for the button look */
transform: rotate(180deg); /* Center and flip the SVG */
}
</style>
</head>
<body>
<div class="vertical-bar">
<img src="top-image.jpg" alt="" class="top-image">
<div class="middle-section"></div>
<img src="bottom-image.jpg" alt="" class="bottom-image">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment